<!--整改隐患页面-->


<template>
  <div class="clean-pitfall-container">
    <!--新增进度弹框按钮容器-->
    <div class="bt-con" v-if="type == 'add'">
      <!--新增进度按钮-->
      <el-button size="small" type="primary" @click="handleAdd">
        <i class="el-icon-plus"></i>
        <span>新增整改日志</span>
      </el-button>
    </div>


    <!--整改进度卡片-->
    <div class="data-list" :style="{height: `calc(100% - ${type == 'add' ? 40 : 0}px)`}">
      <!--整改进度卡片滚动条-->
      <el-scrollbar v-if="isArr(dataList)">
        <!--整改进度卡片组件-->
        <CleanPitfallCard :data-item="item" v-for="item in dataList"></CleanPitfallCard>
      </el-scrollbar>
      <el-empty v-else description="暂无整改数据"></el-empty>
    </div>

    <!--新增进度Dialog弹框-->
    <el-dialog
        title="整改隐患"
        :visible.sync="open"
        :modal="false"
        :close-on-click-modal="false"
        width="60%">
      <el-form v-if="open" :rules="rules" :model="form" ref="form" size="small"
               label-width="80px">
        <el-form-item class="column-item" label="整改进度" prop="schedule">
          <el-slider
              :step="10"
              v-model="form.schedule"
              show-input>
          </el-slider>
        </el-form-item>
        <el-form-item class="column-item" label="整改过程记录描述" prop="situation">
          <el-input
              v-model="form.situation"
              placeholder="请输入整改过程记录描述"
              type="textarea"
              clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item class="column-item annex-box" label="整改过程的相关文件" prop="fileIds">
          <template slot="label">
            整改过程的相关文件
            <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                       @click="upload">上传文件
            </el-button>
          </template>
          <show-file-list :file-list="fileList" @delFile="delFile"></show-file-list>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">确定</el-button>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import CleanPitfallCard from "@/views/checkBusPage/components/cleanPitfall/CleanPitfallCard.vue";
import {listPageMixins} from "@/mixins/listPageMixins";
import {isArr} from "@/utils/arrayUtil";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import {queryQuestionRepairRecord, repairQueryQuestion, repairQuestion} from "@/api/checkPage/repair";

export default {
  mixins: [subPageMixin, listPageMixins],
  components: {
    CleanPitfallCard,
    ShowFileList,
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    recData: {
      type: Object
    }
  },
  data: function () {
    return {
      getListFun: queryQuestionRepairRecord,
      updateFun: repairQuestion,
      otherQueryParam: {
        id: null,
      },
      baseForm: {
        id: this.recData.id,
        inspectId: this.inspectInfo.id,
        //  整改情况
        situation: null,
        //  整改进度
        schedule: 0,
        //  整改后的附件
        repairFileIds: [],
        repairFileVos: []
      },
      rules: {
        situation: [
          {required: true, message: "整改情况不能为空", trigger: "blur"}
        ],
      },
    }
  },
  watch: {
    fileList(val) {
      this.form.repairFileIds = isArr(val) ? val.map(file => file.fileId) : [];
    },
    recData: {
      handler() {
        this.otherQueryParam = {id: this.recData.id}
        this.getList()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    isArr,
    /** 表单重置  */
    reset() {
      this.baseForm.id = this.recData.id
      this.baseForm.inspectId = this.inspectInfo.id
      this.baseForm.schedule = this.recData.schedule
      this.form = _.cloneDeep(this.baseForm);
      this.resetForm("form");
    },
    preposition(param) {
      return param?.id != null && param?.id !== ''
    },
    reload() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
//隐患整改组件内容器
.clean-pitfall-container {
  width: 100%;
  height: 100%;

  .bt-con, .data-list {
    width: 100%;
  }

  .bt-con {
    height: 40px;
  }

  .data-list {
    overflow: hidden;
  }

  //新增进度弹框
  .el-dialog {

    //新增进度弹框容器样式
    .add-extent-container {

    }
  }
}
</style>
